<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap{
            width: 100px;
            height: 200px;
            background: pink
        }
        p{
            width: 50px;
            height: 100%;
            background: red
        }
    </style>
</head>
<body>
    <div class="wrap">
        <p></p>
        <img src="" alt="">
    </div>
</body>
</html>
<!-- 
    高度自适应的使用
        属性:height
        特点
            - 当元素不设置高度或者将高度设置成auto的时候，高度可以被子级元素撑开(自身元素决定)
            - 重点:子级元素自适应父级元素的高度
                - height:100%
                - 常见的用法: html,body{width:100%;height:100%} => 文档占满100%宽高，子级元素自适应父级宽高
                - img自适应到父级 img{width:100%;height:100%} => 会让图片拉伸变形
            - 需求
                - 在浏览器中有三个盒子：上 、 中 、 下
                - 上、下两个盒子的高度为100px
                - 中 有文本的时候让其自动撑开/没有文本的时候保持一个最小高度
 -->